<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        meta适用于网页中的一些元数据，不给用户显示
        charset  字符集
        name     数据名称
        content  数据内容
        keywords 关键字
     -->
    <meta charset="UTF-8">
    <!-- 
        在html中不能书写一些特殊的符号，诸如很多空格和大于小于号，他们有自己特殊的写法
        一般表示为&实体的名字：
        &nbsp; 空格
        &gt;   大于号
        &ly;   小于号
        &copy; 版权符号
     -->
    <meta name="discription" content="华北电力大学（北京校区）MOS实验室，是依托电气与电子工程学院电工电子教学中心建立并接受其指导，以培养学生创新创业意识、服务学生参加创新创业活动为目的学生组织。">
    <meta name="author" content="R.e.">
    <meta name="Keywords" content="MOS，实验室网站，技术，电力，电子，实验室，华北电力大学">
    <!-- 
        <meta http-equiv="refresh" content="3;url=http://www.baidu.com"> 
        将页面重定向到另一个网站
    -->
    <title>网页Web与前端学习</title>
    <style> 
    /* css中的注释：
           在style里面遵循css的语法规范，而不是使用html语法规范
           给所有的p都设置成为规定的颜色，内部样式更适合对样式进行复用 
       css的基本语法：
           选择器：通过选择器可以选择页面中的指定元素
               p  选择页面中所有的p
               h1 选择页面中所有的h1
           声明块：通过声明块为指定元素申明样式
               声明块由一个一个声明组成
               声明是一个名值对结构，名和值之间:连接;结尾
     */
    .hh{
        color: aqua;  
    }
    /* 标签选择 */
    p{
        color:green;
        font-size: 50px;
    }
    /* 标题选择 */
    #title6{
        color:rgb(243, 46, 20);
    }
    /* 选择两者 */
    h1,div{
        /* 同时选中两者 */
    }
    /* 选择含有指定属性的元素 */
    p.titile{
        color: rgb(51, 49, 46);
    }
    p[title=评价]{
        color: orange;
    }
    p[title^=评]{
        /* 以属性值开头 */
    }
    p[title$=价]{
        /* 以属性值结尾 */
    }
    p[title*=评]{
        /* 不考虑属性值 */
    }
    u1>li:first-child{
        /* 自动选择第一个 */
    }
    /* 
    常用选择器：
       元素选择器
          作用：根据标签的选中指定的元素
          语法：标签名()
          例子:p{} h1{} div{}
       id选择器
          作用:根据id值选择元素
          语法:#id
       class选择器
       通配选择器
          语法:*{}
     */

    /* 
    复合选择器-交集选择器
       作用：选择多个限定的元素
       要求：将class为red的div字体大小限定为30px
       语法：div.red{}
       注意：交际选择器如果有元素选择器，必须以元素选择器开头

    复合选择器-并集选择器
       作用：同时选择多个选择器
       语法：选择器1，选择器2，选择器3
            #b1,.p1,h1,span,div,red{}

    关系选择器-A>B>C
       父元素
          直接包含子元素的元素
       子元素
          直接被父元素包含的元素
       祖先元素
          直接活或间接包含后代元素的元素
          一个元素的父元素也是他的祖先元素
       后代元素
          直接或间接被后代元素包含的元素
       兄弟元素
          拥有相同父元素的元素

    属性选择器-title用于选择提示文字
       作用：使有title属性的值变换颜色
       语法：属性名-属性值

    伪类选择器-Pseudo-classes
        作用：将ul里的li设置为红色，自动选择第一个元素
             用于描述一个元素的特殊状态
             被点击的元素
             鼠标移入的元素
        语法：一般情况下选择冒号开头
             :first-child 第一个子元素
             :last-child 最后一个子元素
             :nth-child(4) 第几个子元素(特殊值n)
                    n  第n个子元素
                    2n 选中了偶数个元素
                    2n+1/odd 选中奇数位元素
        注意：伪类对所有的元素进行排序。
              :first-of-type
              :last-of-type
              :nth-of-type()
             同类型元素中进行排序
    :not() 将复合条件的元素从选择器去除
    u1>li:not(:nth-child(3)){}
            /* 除了第三个元素都变化了 */
    伪元素选择器-Pseudo-elements  
    */
    </style>
    <link rel="stylesheet" href="./">
</head>
<body>
    <!-- 
        在网页中html负责网页的结构，应该关注定义而不是关注样式(css)
        标题标签:h1~h6(重要性递减)
        h1的重要性仅次于title，一般情况下1~3
        在页面中独占一行的元素称为块元素
     -->
    <h1>一级标题</h1>
    <!-- 
        网页中通过块元素对页面进行布局
     -->
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6 id="title6">六级标题</h6>
    <!-- 
        p表示页面中的段落
     -->
     <p>在p标签的内容就表示一个段落</p>
     <hgroup>
         <!-- 
             给标签分组，同时一组标题可以放在一起
          -->
         <h1>回乡偶书</h1>
         <h2>其一</h2>
     </hgroup>
     <!-- 
         em     标签用于表示语音语调的加重，斜体
         b      标签表示，加粗
         strong 标签表示强调重要的内容
         在页面中不会独占一行的元素称为行内元素
      -->
     <p>今天天气<b>真</b>不错！</p>
     鲁迅说：
     <!-- 
         blockquote 标签表示一个长引用
         q          标签是一个行内元素，主要显示双引号
         br         标签表示换行
      -->
     <blockquote>这句话我是从来没有说过。</blockquote>
     <!-- 
         header  表示网页的头部，一般是导航或者其他
         main    表示网页的主体内容，一个网页中只会有一个main
         footer  表示网页的底部
         header  也可以表示网页中某一个部分的头部和底部
         footer  也可以表示网页中某一个部分的头部和底部
         nav     表示网页中的导航，可以定义导航栏
         aside   表示和主体相关的其他内容（侧边栏）
         article 表示独立的文章
         section 表示独立的区块
         div     没有语义，就是表示一个区块
         span    行内元素，没有任何语义
      -->
    <header></header>
    <main></main>
    <footer></footer>
    <header></header>
    <nav></nav>
    <aside></aside>
    <article></article>
    <div></div>
    <!-- 
        列表(list)
            1.铅笔
            2.尺子
            3.橡皮
        在html中列表有三种：有序列表，无序列表，定义列表
        无序列表使用ul标签，使用li表示列表项，表示为点
        有序列表使用ol标签，使用li表示列表项，表示为1234
        定义列表使用dl标签，使用dt表示定义的内容，使用dp进行解释说明
        列表之间可以互相嵌套
     -->
    <ul>
        <!-- 
            一般用来表示导航栏
         -->
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

    <!-- 
        伪类选择器实验
     -->
     <ul>
         <li>第一个</li>
         <li>第二个</li>
         <li>第三个</li>
         <li>第四个</li>
         <li>第五个</li>
     </ul>
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

    <dl>
        <dt>结构</dt>
        <dp>结构表示网页的结构，规定网页中哪里是标题，哪里是段落</dp>
    </dl>
    <!-- 
        超链接：可以让我们从一个界面跳转到另一个界面，是当前页面的其他位置
        使用a标签定义超链接
            属性：
                href表示跳转的目标路径,值可以是外部网站的地址
                href也可以写一个内部页面的地址
        超链接是行内标签，在a标签中可以嵌套除它自身外的任何的元素
     -->
    <a href="http://www.baidu.com">超链接</a>
    <!-- 
        绝对路径
     -->
    <br>
    <!-- 
        相对路径一般都会使用.或者..开头
        ./  表示当前文件所在的目录
        ../ 表示当前文件所在目录的上级目录
        如果不写默认就是写了./
     -->
    <a href="07.列表.html">超链接</a>
    <!-- 
        target超链接打开的位置
          可选值：_self 默认值，在当前页面中打开
                 _blank 在新的页面中打开超链接
     -->
     <a href="07.列表.html" target="_blank">超链接</a>
    <!-- 
        回到顶部的超链接在href中写入#
        #也可以当作路径的占位符，或者写javascript:;
        id属性(唯一不重复的)
          每一个标签都可以添加一个id属性，是唯一的标识，每一个页面中不能出现重复的id属性
     -->
     <a id="bottom" href="#">回到顶部</a>
     <a href="#bottom">回到bottom的位置</a>
     <a href="javascript:;">占位超链接</a>
    <!-- 
        图片标签用于向页面引入一个外部的图片
        使用img标签引入外部的图片，img标签是一个自结束标签
        img这种元素属于替换元素(块与行内元素之间，具有两种元素的特点)
        属性：
          src 指定的是外部图片的路径
          alt 对图片的描述，有些浏览器不会显示，有些会在图片无法加载的时候显示
              搜索引擎会根据alt中的内容识别图片，如果不写alt那么图片不会被搜索引擎搜索
          width  图片的宽度(单位是像素)
          height 图片的高度
              宽度和高度如果只修改了一个，另一个则会等比例放大
        注意：一般情况下在pc端，不建议修改图片的大小
              在移动端，经常需要对图片进行缩放
        
        图片的格式:
          jpeg(jpg) 
              支持的颜色比较丰富，并不支持透明效果，不支持动图
          gif       
              支持颜色少，支持简单透明，支持动图
          png***    
              支持的颜色丰富，支持复杂透明，不支持动图
          webp      
              用来表示网页中图片的格式，具备了其他所有格式的图片具有的特点
              缺点：兼容性不好
          base64
              将图片使用base64进行编码，直接将图片转换成为字符并且引用，和网页一起加载的图片可以使用
     -->
     <img src="javascript:;">
     <img src="...">
     <!-- 
        内联框架:向当前页面中引入一个其他页面
           src 要引入的网页的路径
           frameborder 内联框架的边框，0表示没有1表示有
      -->
     <iframe src="http://www.baidu.com" frameborder="0"></iframe>
     <!-- 
        audio 引入一个外部分音频文件
           音视频文件默认情况下不允许用户自己控制
        属性：(需要就写不需要就不写)
           controls 是否允许用户自己控制播放
           autoplay 如果设置了autoplay则音乐在打开页面会自动播放，目前大多数浏览器都不会自动播放
           loop     音乐是否循环播放
      -->
     <audio src="./" controls></audio>
     <audio src="./" autoplay></audio>
     <audio controls>
         <!-- 对不起，您的浏览器不支持播放音频，请升级浏览器！ -->
         <source src="./">
         <embed src="./" type="audio/mp3大类型+具体类型" width height> 
     </audio>
     <!-- <embed src="./" type="audio/mp3大类型+具体类型" width height> 支持其他老版本的额浏览器-->
     <!-- 
         使用vedio在页面中引入一个视频
      -->
        <video>
            <source src="">
            <embed src="./"> 
        </video>
    
    <!-- 网页分成三个部分
         结构(HTML)
            -详情见weblearn
         表现(CSS)
            -层叠样式表
            -Web实际上是一个立体的结构，CSS可以为网页的每一个层设置样式
            -能看到的只是网页的最上面一层
         行为(JavaScript) 
    -->

    <!-- 修改方式1
           -在标签内用style样式属性来设置元素的样式，使用css语法（内联样式）
           -问题：内联样式只能对一个标签生效，如果希望影响到多个元素则都需要复制
                  样式发生维护时，会非常不方便
           -注意：开发时绝对不要使用内联样式

         修改方式2
           -写在head的style里面
         
         修改方式3(最推荐的使用方式)
           -外部样式表
           -可以将css样式编写到外部的css文件中
           -通过link标签引入外部的css文件
           -只要想使用这些样式的网页都可以使用
           -将样式编写到css文件中，可以用到浏览器的缓存机制，使运行变快
    -->
     <p style="color:red;font-size: 60px;">少小离家老大回</p>
     <p title="评价">今天天气真不错</p>
     
<!-- 
    class 是一个标签的属性，它和id相似但是可以重复使用
          可以同时为一个元素指定多个class
 -->
     <p class="hh">123</p>
     <p class="hh">456</p>
</body>
</html>